<template>
  <div class="axios-container page-container">
    <div class="page-title">Axios Test Page</div>
    <div class="user-info-container">
      <el-card class="box-card">
        <div>aa</div>
        <template #header>
          <div class="card-header">
            <span>XPoet</span>
            <el-button class="button" type="text" @click="getUserInfo"
              >点击获取XPoet信息
            </el-button>
          </div>
        </template>
        <div class="info-list-box" v-loading="loading">
          <!-- <div class="text item" v-if="userInfo?.name">name: {{ userInfo?.name }}</div>
          <div class="text item" v-if="userInfo?.bio">bio: {{ userInfo?.bio }}</div>
          <div class="text item" v-if="userInfo?.blog">blog: {{ userInfo?.blog }}</div> -->
          <div v-for="(item, index) in list" :key="index">
            {{ item.username }}
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, reactive, toRefs } from 'vue'
import { fetchUserInfo } from '@/api'

export default defineComponent({
  name: 'Axios',
  setup() {
    const userInfo: Ref = ref(null)
    const loading = ref<boolean>(false)
    // let arr: any[] = []
    const data = reactive({
      list: [] as any
    })
    // const data = reactive<object<any>>()
    const getUserInfo = () => {
      loading.value = true
      fetchUserInfo().then((res: any) => {
        data.list = res
        loading.value = false
      })
      // .get('/users/XPoet')
      // .then((response) => {
      //   console.log('response: ', response.data)
      //   userInfo.value = response.data
      //   loading.value = false
      // })
      // .catch((error) => {
      //   loading.value = false
      //   console.error(error)
      // })
    }

    return {
      userInfo,
      loading,
      ...toRefs(data),
      getUserInfo
    }
  }
})
</script>

<style scoped lang="scss">
.axios-container {
  .user-info-container {
    display: flex;
    justify-content: center;
    width: 100%;

    .info-list-box {
      padding: 10px;

      .text {
        font-size: 14px;
      }

      .item {
        margin-bottom: 18px;
      }
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .box-card {
      width: 480px;
    }
  }
}
</style>
